<template>
<div>
  <el-row :gutter="10">
   <el-col :span="6">
     <!--1总销售额-->
     <el-card class="box-card">
       <Detail title="总销售额" :count="'￥ '+Math.floor(Math.random()*9999+1)">
         <template slot="carts">
           <span>周同比&nbsp;&nbsp;{{ (Math.random()*99+1).toFixed(2) }}%<svg t="1644928570828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3121" width="16" height="16"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="3122"></path></svg></span>&nbsp;&nbsp;
           <span>日同比&nbsp;&nbsp;{{ (Math.random()*99+1).toFixed(2) }}%<svg t="1644928635751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4151" width="16" height="16"><path d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z" fill="#1afa29" p-id="4152"></path></svg></span>
         </template>
         <template slot="footer">
           <span>日销售额 ￥ {{ Math.floor(Math.random()*9999+1) }}</span>
         </template>
       </Detail>
     </el-card>
   </el-col>
   <el-col :span="6">
     <!--2访问量-->
     <el-card class="box-card">
       <Detail title="访问量" :count="Math.floor(Math.random()*9999+1)">
         <template slot="carts">
           <lineCharts/>
         </template>
         <template slot="footer">
           <span>日访问量 {{ Math.floor(Math.random()*9999+1) }}</span>
         </template>
       </Detail>
     </el-card></el-col>
   <el-col :span="6">
     <!--3支付笔数-->
     <el-card class="box-card">
       <Detail title="支付笔数" :count="Math.floor(Math.random()*9999+1)">
         <template slot="carts">
           <barCharts/>
         </template>
         <template slot="footer">
           <span>转化率 {{ Math.floor(Math.random()*99+1) }}%</span>
         </template>
       </Detail>
     </el-card></el-col>
   <el-col :span="6">
     <!--4运营活动效果-->
     <el-card class="box-card">
       <Detail title="运营活动效果" :count="randomSmall+'%'">
         <template slot="carts">
           <progressCharts :count="randomSmall"/>
         </template>
         <template slot="footer">
           <span>周同比&nbsp;&nbsp;{{ (Math.random()*99+1).toFixed(2) }}%<svg t="1644928570828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3121" width="16" height="16"><path d="M512 405.333333L298.666667 618.666667h426.666666L512 405.333333z" fill="#d81e06" p-id="3122"></path></svg></span>&nbsp;&nbsp;
           <span>日同比&nbsp;&nbsp;{{ (Math.random()*99+1).toFixed(2) }}%<svg t="1644928635751" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4151" width="16" height="16"><path d="M512 618.666667L298.666667 405.333333h426.666666L512 618.666667z" fill="#1afa29" p-id="4152"></path></svg></span>
         </template>
       </Detail>
     </el-card></el-col>
  </el-row>
</div>
</template>

<script>
import Detail from './Detail/index.vue'
import lineCharts from './lineCharts/index.vue'
import barCharts from './barCharts/index.vue'
import progressCharts from './progressCharts/index.vue'
export default {
  name: 'index',
  components:{Detail,lineCharts,barCharts,progressCharts},
  computed:{
    randomSmall(){
      return Math.floor(Math.random()*99+1)
    }
  }
}
</script>

<style scoped>

</style>
